<template>
  <div class="gl_contentBox gl_heightFull">
    <!-- 搜索 -->
    <div class="gl_searchBox gl_mb_15">
      <el-row :gutter="20">
        <el-col :md="6" :lg="4">
          <p>班级</p>
          <el-select v-model="classObj" size="mini" placeholder="请选择班级" value-key="id" @change="resetPage">
            <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item" />
          </el-select>
        </el-col>
        <transition name="bounce">
          <el-col v-if="isShowTime" :md="8" :lg="6">
            <p>时间</p>
            <el-date-picker
              v-model="createCourseTime"
              type="daterange"
              range-separator="至"
              start-placeholder="请选择日期"
              end-placeholder="请选择日期"
              size="mini"
              value-format="yyyy-MM-dd"
              style="width:100%"
              :picker-options="pickerOptions"
              :clearable="false"
            />
          </el-col>
        </transition>
        <el-col v-if="!isShowTime" :md="6" :lg="4">
          <el-button size="mini" icon="el-icon-plus" type="warning" style="margin-top: 25px" @click="openCreateTime">创建排课周期</el-button>
        </el-col>
        <el-col v-else :md="8" :lg="6">
          <el-button size="mini" type="primary" style="margin-top: 25px" :loading="timeLoading" @click="submitCreateTime">确定</el-button>
          <el-button size="mini" style="margin-top: 25px" @click="closeCreateTime">取消</el-button>
        </el-col>
      </el-row>
    </div>
    <div v-loading="timeDivLoading" class="gl_mb_15 time_box">
      <span class="gl_fs_12" style="color: #afafaf">已有排课周期：</span>
      <template v-if="timeList.length > 0">
        <div v-for="item in timeList" :key="item.id" class="time_item gl_mr_15">
          <span class="gl_pr_10 gl_fs_14">{{ item.startDate | FormatDate('yyyy-MM-dd') }} ~ {{ item.endDate | FormatDate('yyyy-MM-dd') }}</span>
          <el-button v-if="item.id != currentTime.id" size="mini" type="text" @click="editTime(item)">编辑</el-button>
          <span v-else class="gl_pr_10 gl_fs_12" style="color: #afafaf">正在编辑</span>
          <el-button size="mini" type="text"><span class="gl_color_error" @click="removeTime(item)">删除</span></el-button>
        </div>
      </template>
      <template v-else>
        <span class="gl_fs_12">暂无</span>
      </template>
    </div>
    <el-row class="gl_mb_15">
      <el-col>
        <el-button size="mini" icon="el-icon-s-promotion" type="primary" :loading="loading" @click="sumbit">发布</el-button>
        <span style="color: #ff4949" class="gl_fs_12 gl_pl_15">提示说明：鼠标双击周一至周日的空白处激活新建排课</span>
      </el-col>
    </el-row>
    <el-row class="gl_mb_15">
      <el-col align="center">
        <span class="gl_pr_15">当前排课周期：{{ currentTime.time || '- -' }}</span>
      </el-col>
    </el-row>
    <div class="gl_mt_5 timetable_create">
      <el-table
        :data="classTable"
        :header-cell-style="handleHeaderCellStyle"
        @cell-dblclick="openDialog"
      >
        <el-table-column prop="course" width="60" />
        <el-table-column v-for="(item, index) in dateList" :key="index" :prop="item.prop" :label="item.label">
          <template slot-scope="{ row }">
            <div v-if="row[item.prop] && row[item.prop].length > 3">
              <div
                v-for="(jtem, jndex) in row[item.prop]"
                :key="jndex"
                class="gl_dis_ib class_td"
                :style="{ width: '24px', background: jtem.courseScheduleColor }"
              >
                <Hover :is-create="true" :data="jtem" :class-name="classObj.name" :week="item.label" :del-key="jndex" @edit="edit" @remove="remove">
                  <div slot="content" style="height: 80px">
                    <span>{{ formatClass(jtem.course.name) }}</span>
                  </div>
                </Hover>
              </div>
            </div>
            <div v-else>
              <div
                v-for="(jtem, jndex) in row[item.prop]"
                :key="jndex"
                class="gl_dis_ib class_td"
                :style="{ width: 100 / row[item.prop].length + '%', background: jtem.courseScheduleColor }"
              >
                <Hover :is-create="true" :data="jtem" :class-name="classObj.name" :week="item.label" :del-key="jndex" @edit="edit" @remove="remove">
                  <div slot="content" class="ellipsis">
                    <span>{{ jtem.course.name }}</span>
                  </div>
                </Hover>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <CreateDialog
      ref="createDialog"
      :class-obj="classObj"
      :week="week"
      :create-course-time="createCourseTime"
      @getForm="getForm"
      @editForm="editForm(arguments)"
    />
  </div>
</template>

<script>
import { CopyData } from '@/lib/index';
import Hover from '../hover.vue';
import {
  api_GET_ClubClass, // 获取班级列表
  api_POST_ClubCourseSchedulePeriod, // 创建排课周期
  api_GET_ClubCourseSchedulePeriod, // 获取排课周期
  api_DELETE_ClubCourseSchedulePeriodId, // 删除排课周期
  api_GET_ClubCourseSchedulePeriodPeriodCourseScheduleList, // 获取排课周期下的课程
  api_POST_ClubCourseSchedulePeriodHasReservation, // 在当前排课周期内是否有预约
  api_POST_ClubCourseScheduleByCalendar // 日历建课
} from '@/extend/api/hallswaggerApi/app.js';
import {
  CreateCourseScheduleInput
} from '@/lib/form/hall/swaggerForm.js';
import CreateDialog from '@/components/Class/createDialog.vue';
export default {
  name: 'CreateClass',
  components: {
    CreateDialog,
    Hover
  },
  data() {
    return {
      loading: false,
      timeLoading: false,
      timeDivLoading: false,
      dateList: [
        {
          prop: '1',
          label: '周一'
        },
        {
          prop: '2',
          label: '周二'
        },
        {
          prop: '3',
          label: '周三'
        },
        {
          prop: '4',
          label: '周四'
        },
        {
          prop: '5',
          label: '周五'
        },
        {
          prop: '6',
          label: '周六'
        },
        {
          prop: '7',
          label: '周日'
        }
      ], // 表头
      subForm: new CreateCourseScheduleInput(),
      form: {}, // 弹窗所填写的内容
      classList: [], // 班级列表
      createCourseTime: [], // 排课周期
      classObj: {}, // 选择的班级
      week: '', // 周几
      initTable: [
        {
          course: '5:00',
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        },
        {
          course: '6:00',
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        },
        {
          course: '7:00',
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        },
        {
          course: '8:00',
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        },
        {
          course: '9:00',
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        },
        {
          course: '10:00',
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        },
        {
          course: '11:00',
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        },
        {
          course: '12:00',
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        },
        {
          course: '13:00',
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        },
        {
          course: '14:00',
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        },
        {
          course: '15:00',
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        },
        {
          course: '16:00',
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        },
        {
          course: '17:00',
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        },
        {
          course: '18:00',
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        },
        {
          course: '19:00',
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        },
        {
          course: '20:00',
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        },
        {
          course: '21:00',
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        },
        {
          course: '22:00',
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        },
        {
          course: '23:00',
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        },
        {
          course: '24:00',
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        }
      ],
      weekObj: {
        '1': [],
        '2': [],
        '3': [],
        '4': [],
        '5': [],
        '6': [],
        '7': []
      }, // 操作数据的索引值
      noClick: [1, 2, 3, 4, 5, 6, 7], // 不能点击的星期
      classTable: [], // 所渲染的数据
      pickerOptions: { // 时间范围限制
        disabledDate: time => {
          var nowDay = new Date();
          return time.getTime() < nowDay;
        }
      },
      isShowTime: false, // 是否在创建排课周期
      currentTime: {
        id: '',
        time: ''
      }, // 当前排课周期
      timeList: [] // 当前班级的排课周期列表
    };
  },
  created() {
    this.getClass();
    this.classTable = JSON.parse(JSON.stringify(this.initTable));
  },
  methods: {
    // 获取班级列表
    getClass() {
      var that = this;
      api_GET_ClubClass({ HasScheduledCourse: null, IncludeCourse: true, IncludeClassStudent: false }).then(res => {
        that.classList = res.items || [];
      }).catch(error => {
        that.$message({ type: 'error', message: error.error.message || '获取班级列表失败' });
      });
    },
    // 获取排课周期
    getCycleTime(id) {
      var that = this;
      this.timeDivLoading = true;
      const form = {
        classId: id,
        IncludeClass: true
      };
      api_GET_ClubCourseSchedulePeriod(form).then(res => {
        if (res) {
          that.timeDivLoading = false;
          that.timeList = res;
        }
      }).catch(error => {
        that.timeDivLoading = false;
        that.$message({ type: 'error', message: error.error.message || '获取排课周期失败' });
      });
    },
    // 打开日历建课弹窗
    openDialog(row, column, cell, event) {
      if (!this.currentTime.time) {
        this.$message({ type: 'warning', message: '请先选择或创建排课周期' });
        return;
      }
      if (!this.noClick.includes(Number(column.property))) {
        this.week = column.property; // 双击的是周几
        this.$refs.createDialog.open('日历建课');
      } else {
        this.$message({ type: 'error', message: '您选择的时间内不包含' + column.label });
      }
    },
    // 拿到弹窗内填写的数据
    getForm(val) {
      this.form = JSON.parse(JSON.stringify(val));
      // 计算该渲染的单元格坐标
      this.form.startHour = String(this.form.startHour);
      const startHour = this.form.startHour < 10 ? this.form.startHour.charAt(this.form.startHour.length - 1) : this.form.startHour;
      const key = this.classTable.findIndex(item => item.course.split(':')[0] === startHour);
      if (key !== -1) {
        this.form.hourKey = key; // 时间列的坐标
        if (this.form.isEdit) {
          // 发布前的编辑
          this.classTable[key][this.form.week].push(this.form);
          this.weekObj[this.form.week].push(key); // 保存所渲染的单元格的坐标
        } else {
          this.classTable[key][this.week].push(this.form);
          this.weekObj[this.week].push(key); // 保存所渲染的单元格的坐标
        }
      }
      this.week = null; // 填写完一次后 重置 操作的星期
    },
    // 删除
    remove(data, hourKey) {
      let startHour = String(data.startHour);
      startHour = startHour < 10 ? startHour.charAt(startHour.length - 1) : startHour;
      // hourKey存在，则是编辑（先删除旧的，后添加新的），需取hourKey（即旧的时间坐标）
      // 若编辑上课时间，则新旧坐标不一致，hourKey为旧坐标
      const key = (hourKey === 0 || hourKey) ? hourKey : this.classTable.findIndex(item => item.course.split(':')[0] === startHour);
      // 替换掉渲染数组内的值
      this.classTable[key][data.week].splice(data.delKey, 1);
      const index = this.weekObj[data.week].findIndex(item => item === key);
      // 更新索引值
      this.weekObj[data.week].splice(index, 1);
    },
    // 编辑前（打开弹窗）
    edit(data) {
      let startHour = String(data.startHour);
      startHour = startHour < 10 ? startHour.charAt(startHour.length - 1) : startHour;
      // 记录旧的时间坐标（因上课时间可修改）
      const hourKey = this.classTable.findIndex(item => item.course.split(':')[0] === startHour);
      this.$refs.createDialog.open('日历建课', data, 'edit', hourKey);
    },
    // 编辑后，拿到刚刚编辑的数据，进行数据更换
    editForm(msg) {
      if (msg[1] === 'edit') {
        this.remove(msg[0], msg[0].hourKey);
        this.getForm(msg[0]);
      }
    },
    // 表头样式（可编辑与不可编辑的样式不同）
    handleHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
      if (this.noClick.includes(Number(columnIndex)) || (!this.currentTime.time)) {
        return 'color: #97a8be';
      }
      return '';
    },
    // 创建排课周期
    openCreateTime() {
      if (!this.classObj.id) {
        this.$message({ type: 'warning', message: '请先选择班级' });
        return;
      }
      this.isShowTime = true; // 显示日期选择框
    },
    // 确定 创建排课周期
    submitCreateTime() {
      if (!this.createCourseTime.length > 0) {
        this.$message({ type: 'warning', message: '请先选择时间' });
        return;
      }
      var that = this;
      this.timeLoading = true;
      const form = {
        startDate: this.createCourseTime[0],
        endDate: this.createCourseTime[1],
        classId: this.classObj.id
      };
      // 查询该周期内是否有预约记录
      api_POST_ClubCourseSchedulePeriodHasReservation(form).then(res => {
        if (res) {
          // 有预约记录则弹窗提醒
          this.$confirm('此时间周期内已有预约课程，如变更将会删除预约记录,是否确认创建?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            that.createTime(form);
          });
        } else {
          // 没有，直接走创建流程
          that.createTime(form);
        }
      }).catch(error => {
        that.timeLoading = false;
        that.$message({ type: 'error', message: error.error.message || '查询当前周期内的预约记录失败' });
      });
    },
    // 开始走创建流程
    createTime(form) {
      var that = this;
      // 创建新的排课周期
      api_POST_ClubCourseSchedulePeriod(form).then(res => {
        if (res) {
          // 重新获取排课周期
          that.getCycleTime(that.classObj.id);
          // 当前周期为刚创建的周期
          that.currentTime = {
            id: res.id || '',
            time: that.createCourseTime[0] + '~' + that.createCourseTime[1]
          };
          const arr = [that.createCourseTime[0], that.createCourseTime[1]];
          // 当周期改变时，重新计算不可点击的星期
          that.changeTime(arr);
          // 隐藏日期选择框
          that.isShowTime = false;
          that.createCourseTime = [];
          that.timeLoading = false;
        }
      }).catch(error => {
        that.timeLoading = false;
        that.$message({ type: 'error', message: error.error.message || '创建排课周期失败' });
      });
    },
    // 取消 创建排课周期
    closeCreateTime() {
      this.isShowTime = false;
      this.createCourseTime = [];
    },
    // 编辑排课周期（获取排课周期下的课表）
    editTime(item) {
      var that = this;
      that.classObj = { // 当前班级id，名称
        id: item.classId,
        name: item.class && item.class.name
      };
      that.currentTime = { // 当前时间周期
        id: item.id,
        time: item.startDate.substring(0, 10) + '~' + item.endDate.substring(0, 10)
      };
      const arr = [item.startDate, item.endDate];
      this.changeTime(arr); // 重新计算不可点击的星期

      const form = {
        startDate: item.startDate,
        endDate: item.endDate,
        classId: item.classId,
        IncludeClass: true,
        IncludeCourse: true,
        IncludeCoach: true,
        IncludeClassroom: true,
        IncludeMessageTemplate: true,
        IncludeReservations: true
      };
      api_GET_ClubCourseSchedulePeriodPeriodCourseScheduleList(form).then(res => {
        if (res) {
          // 处理获取到的课表数据
          that.handleTimeTable(res);
        }
      }).catch(error => {
        that.$message({ type: 'error', message: error.error.message || '创建排课周期失败' });
      });
    },
    // 处理获取到的课表数据
    handleTimeTable(data) {
      var that = this;
      const tableData = JSON.parse(JSON.stringify(data));
      for (let i = 0; i < tableData.length; i++) {
        // 周日为0，改为7
        const week = tableData[i].dayOfWeek < 1 ? 7 : tableData[i].dayOfWeek;
        const item = tableData[i].courseSchedules;
        for (let j = 0; j < item.length; j++) {
          const jtem = item[j];
          if (jtem) {
            const key = jtem.startHour;
            // 重构课程数据，方便回显
            jtem['course'] = {
              id: jtem.courseId,
              name: jtem.courseName,
              teachingModeCode: jtem.courseTeachingModeCode,
              courseScheduleColor: jtem.courseScheduleColor
            };
            // 重构教室数据，方便回显
            jtem['classroom'] = {
              id: jtem.classroomId,
              name: jtem.classroomName
            };
            // 重构教练（hover时回显）
            jtem.courseEmployees.forEach(ctem => {
              if (ctem.courseEmployeeTypeCode === 'Coach') {
                jtem['coachObj'] = {
                  id: ctem.employeeId,
                  name: ctem.employee.name
                };
              }
            });
            // 重构上课时间，方便回显
            const startHour = jtem.startHour < 10 ? '0' + jtem.startHour : jtem.startHour;
            const endHour = jtem.endHour < 10 ? '0' + jtem.endHour : jtem.endHour;
            const startMinute = jtem.startMinute < 10 ? '0' + jtem.startMinute : jtem.startMinute;
            const endMinute = jtem.endMinute < 10 ? '0' + jtem.endMinute : jtem.endMinute;
            jtem['time'] = startHour + ':' + startMinute + '~' + endHour + ':' + endMinute;
            // 将其push进渲染数组对应位置
            that.classTable[key - 5][week].push(jtem);
            // 记录下该组数据的索引值
            that.weekObj[week].push(key - 5);
          }
        }
      }
    },
    // 删除某个排课周期
    removeTime(item) {
      var that = this;
      this.$confirm('此操作将会删除该时间段内已编排好的课程和预约记录，您确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.timeDivLoading = true;
        api_DELETE_ClubCourseSchedulePeriodId(item.id).then(res => {
          that.$message({
            type: 'success',
            message: '操作成功!'
          });
          if (item.id === this.currentTime.id) {
            // 若删除的是正在编辑的时间周期，则清空当前课表
            this.currentTime = {
              id: '',
              time: ''
            };
            this.classTable = JSON.parse(JSON.stringify(this.initTable));
          }
          // 重新获取排课周期
          that.getCycleTime(that.classObj.id);
        }).catch(() => {
          that.timeDivLoading = false;
          that.$message({ type: 'error', message: '操作失败!' });
        });
      });
    },
    // 发布
    sumbit() {
      var that = this;
      if (!this.currentTime.time) {
        this.$message({ type: 'warning', message: '请先选择或创建排课周期' });
        return;
      }
      const isHasCourse = this.weekObj['1'].length > 0 || this.weekObj['2'].length > 0 || this.weekObj['3'].length > 0 || this.weekObj['4'].length > 0 || this.weekObj['5'].length > 0 || this.weekObj['6'].length > 0 || this.weekObj['7'].length > 0;
      if (!isHasCourse) {
        this.$message({ type: 'warning', message: '请先进行排课' });
        return;
      }
      that.loading = true;
      const form = { // 最外层
        startDate: this.currentTime.time.split('~')[0],
        endDate: this.currentTime.time.split('~')[1],
        classId: this.classObj.id,
        inputs: []
      };
      for (const i in this.weekObj) {
        const item = this.weekObj[i];
        this.weekObj[i] = Array.from(new Set(item));
        const sonForm = { // 中层
          dayOfWeek: i === '7' ? 0 : Number(i),
          inputs: []
        };
        for (let j = 0; j < this.weekObj[i].length; j++) {
          const jtem = this.weekObj[i][j];
          const cell = this.classTable[jtem][i];
          for (let k = 0; k < cell.length; k++) {
            const data = cell[k];
            this.subForm = new CreateCourseScheduleInput();
            CopyData(data, this.subForm);
            sonForm.inputs.push(this.subForm);
          }
        }
        if (this.weekObj[i].length > 0) {
          form.inputs.push(sonForm);
        }
      }
      api_POST_ClubCourseScheduleByCalendar(form).then(res => {
        that.loading = false;
        // 发布成功后，格式化原先的数据
        that.classTable = JSON.parse(JSON.stringify(that.initTable));
        that.weekObj = {
          '1': [],
          '2': [],
          '3': [],
          '4': [],
          '5': [],
          '6': [],
          '7': []
        };
        that.currentTime = {
          id: '',
          time: ''
        };
        that.$message({ type: 'success', message: '发布成功' });
      }).catch(error => {
        that.loading = false;
        that.$message({ type: 'error', message: error.error.message || '发布失败' });
      });
    },
    // 当前排课周期改变，重置页面，重新计算不可点击的星期
    changeTime(val) {
      this.classTable = JSON.parse(JSON.stringify(this.initTable));
      this.week = '';

      let timeLength = new Date(val[1]).getTime() - new Date(val[0]).getTime();
      timeLength = Math.floor(timeLength / 86400000) + 1;
      if (timeLength < 7) {
        let first = new Date(val[0]).getDay();
        first = first > 0 ? first : 7;
        const arr = [1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7];
        const list = [];
        for (let i = first - 1; i < arr.length; i++) {
          const item = arr[i];
          list.push(item);
          if (list.length === timeLength) {
            break;
          }
        }
        const arr1 = [1, 2, 3, 4, 5, 6, 7];
        this.noClick = arr1.filter((item) => !list.includes(item));
      } else {
        this.noClick = [];
      }
    },
    // 改变班级，重置页面
    resetPage(val) {
      this.classTable = JSON.parse(JSON.stringify(this.initTable));
      this.week = '';
      this.currentTime = {
        id: '',
        time: ''
      };
      if (!val.courses || !val.courses.length > 0) {
        this.$message({ type: 'warning', message: '此班级未关联课程，请前往班级关联课程' });
      }
      this.getCycleTime(val.id);
    },
    // 课表内的课程名称
    formatClass(str) {
      if (str.length > 5) {
        return str.substr(0, 5) + '\n' + '...';
      }
      return str;
    }
  }
};
</script>

<style lang="scss">
.timetable_create {
  .el-table {
    border: none;
    border-right: none !important;
  }
  .el-table th {
    background: #fff;
    height: 64px;
  }
  .el-table th:first-child {
    border-right: none;
    border-bottom: none;
  }
  .el-table th:nth-last-child(2) {
    border-right: none;
  }
  .el-table th:nth-child(2),th:nth-last-child(2) {
    background: #fafafa;
  }
  // 第二列，最后一列背景色
  .el-table tr td:nth-child(2),td:nth-last-child(1) {
    background: #fafafa;
  }
  .el-table tr td {
    height: 88px;
    padding: 0 0;
  }
  .el-table tr td:not(:first-child) .cell{
    height: 88px;
    padding: 0;
    height: 100%;
  }
  .el-table tr td:not(:first-child){
    cursor: pointer;
  }
  .el-table tr td:first-child {
    border: none;
    font-size: 12px;
    text-align: right;
    color: #71717a;
    line-height: 16px;
    position: relative;
    top: -16px;
  }
  // 取消第一列的hover背景色
  .el-table tbody tr:hover>td:first-child {
    background-color: transparent !important
  }
}
</style>

<style lang="scss" scoped>
.current {
  width: 60px;
  height: 28px;
  background: #f4f4f5;
  line-height: 28px;
  text-align: center;
  color: #18181b;
  border-radius: 6px;
}
.left_right_btn {
  width: 28px;
  height: 28px;
  color: #18181b;
}
.date {
  width: 100%;
  height: 28px;
  line-height: 28px;
  text-align: center;
  color: #333333;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  vertical-align: middle;
}
.type {
  width: 46px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  padding: 4px 16px;
  color: #71717a;
  line-height: 20px;
}
.type_active {
  background: #1990ff;
  color: #ffffff;
}
.class_td {
  height: 96px;
  padding: 4px;
  color: #ffffff;
  vertical-align: top;
  line-height: 14px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid #ffffff;
  overflow: hidden;
}
.ellipsis {
  height: 84px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
}
.time_box {
  border: 1px solid #dbdbdb;
  border-radius: 7px;
  padding: 20px;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  &::-webkit-scrollbar{
    width: 5px;
    height: 5px;
  }
  /*定义滚动条轨道 内阴影+圆角*/
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb{
    border-radius: 12px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    background-color: rgba(144, 147, 153, 0.3);
  }
}
.time_item {
  display: inline-block;
}
</style>
